<script setup lang="ts">
import LoginBox from './layout/index.vue'
import { Lock, User, Message } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import { useRouter } from 'vue-router';
import { onMounted, computed } from 'vue'; // 引入onMounted钩子



//引入管理员相关的小仓库
import useAdminStore from '@/store/modules/admin'; // 命名导入
let adminStore = useAdminStore();


//引入学生相关的小仓库
import useStudentStore from '@/store/modules/student';
let studentStore = useStudentStore();


//引入班级管理的小仓库
import useClassStore from '@/store/modules/class'; // 命名导入
import type { ClassInfo } from '@/api/class/type';
let classStore = useClassStore();


//引入公共管理的小仓库
import useCommonStore from '@/store/modules/common'; // 命名导入
let commonStore = useCommonStore();

onMounted(async () => {
  //获取了班级信息
  await classStore.fetchClasses();
});

// 定义一个函数来转换数据格式
const transformData = (classList: ClassInfo[]): { value: number; label: string }[] => {
  return classList.map(item => ({
    value: item.classId, // 使用class_id作为value
    label: item.className // 使用class_name作为label
  }));
};

// 在组件挂载后调用fetchAndTransformData方法
// 使用计算属性来生成选项列表
const options = computed(() => {
  return transformData(classStore.classes);
});


let registerForm = reactive({ classId: '', studentNumber: '', studentName: '', username: '', password: '', password_confirmation: '', email: '', validate: '' });
let usertype = ref('student');
let loading = ref(false);
let loadingEmail = ref(false);
const $router = useRouter();
const rules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' },],
  studentNumber: [{ required: true, message: '请输入学号', trigger: 'blur' },],
  studentName: [{ required: true, message: '请输入姓名', trigger: 'blur' },],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  password_confirmation: [{ required: true, message: '请输确认密码', trigger: 'blur' }],
  email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
  validate: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
}




const register = () => {
  if (usertype.value === 'student') {
    let studentRegister = reactive({ classId: '', studentNumber: '', studentName: '', studentUsername: '', studentPassword: '', studentEmail: '', verificationCode: '' });
    studentRegister.classId = registerForm.classId;
    studentRegister.studentUsername = registerForm.username;
    studentRegister.studentPassword = registerForm.password;
    studentRegister.studentName = registerForm.studentName;
    studentRegister.studentEmail = registerForm.email;
    studentRegister.studentNumber = registerForm.studentNumber;
    studentRegister.verificationCode = registerForm.validate;
    studentStore.studentRegister(studentRegister);
    $router.push('/login');

  } else if (usertype.value === 'admin') {
    let adminRegister = reactive({ adminUsername: '', adminPassword: '', adminEmail: '', verificationCode: '' });
    adminRegister.adminUsername = registerForm.username;
    adminRegister.adminPassword = registerForm.password;
    adminRegister.adminEmail = registerForm.email;
    adminRegister.verificationCode = registerForm.validate;
    adminStore.adminRegister(adminRegister);
    $router.push('/login');
  } else {
    alert('未知用户类型，请选择正确的用户类型');
  }
  $router.push('/login');
}
const goBack = () => {
  $router.push('/login');
}


/**
 * 实现发送验证码的功能
 */
let buttonText = ref('发送验证码');
const sendMessage = () => {
  //registerForm.value.email
  //发送邮件

  loadingEmail.value = true;
  commonStore.sendVerificationCode(registerForm.email);
  loadingEmail.value = false;
  buttonText.value = '重新发送';
}
</script>

<template>
  <login-box>
    <template #login_form>
      <div class="register_header">
        <h2>用户注册</h2>
        <p>User Registration</p>
      </div>
      
      <el-form class="register_form" :model="registerForm" :rules="rules" ref="ruleFormRef">
        <el-form-item v-if="usertype === 'student'" prop="classId">
          <el-select v-model="registerForm.classId" placeholder="请选择班级" style="width: 100%">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item v-if="usertype === 'student'" prop="studentNumber">
          <el-input v-model="registerForm.studentNumber" placeholder="学号"></el-input>
        </el-form-item>

        <el-form-item v-if="usertype === 'student'" prop="studentName">
          <el-input v-model="registerForm.studentName" placeholder="姓名"></el-input>
        </el-form-item>

        <el-form-item prop="username">
          <el-input :prefix-icon="User" v-model="registerForm.username" placeholder="用户名"></el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input type="password" :prefix-icon="Lock" v-model="registerForm.password" show-password placeholder="密码"></el-input>
        </el-form-item>

        <el-form-item prop="password_confirmation">
          <el-input type="password" :prefix-icon="Lock" v-model="registerForm.password_confirmation" show-password placeholder="确认密码"></el-input>
        </el-form-item>

        <el-form-item prop="email">
          <el-input type="email" :prefix-icon="Message" v-model="registerForm.email" placeholder="邮箱"></el-input>
        </el-form-item>

        <el-form-item prop="validate" class="validate-group">
          <el-input v-model="registerForm.validate" placeholder="验证码"></el-input>
          <el-button v-debounce:500="sendMessage" :loading="loadingEmail" class="send-btn" type="warning">{{ buttonText }}</el-button>
        </el-form-item>

        <el-form-item prop="usertype" class="usertype">
          <el-radio-group v-model="usertype">
            <el-radio value="student" size="large">学生</el-radio>
            <el-radio value="admin" size="large">任课老师</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <div class="btn-group">
          <el-button v-debounce:500="register" :loading="loading" class="register_btn" type="success" size="large">立即注册</el-button>
          <el-button v-debounce:500="goBack" class="back_btn" type="primary" size="large">返回登录</el-button>
        </div>
      </el-form>
    </template>
  </login-box>
</template>

<style scoped lang="scss">
.register_header {
  text-align: center;
  margin-bottom: 30px;
  
  h2 {
    color: #fff;
    font-size: 28px;
    margin-bottom: 5px;
    font-weight: 600;
  }
  
  p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
  }
}

.register_form {
  position: relative;
  width: 100%;

  :deep(.el-input) {
    .el-input__wrapper {
      background-color: rgba(255, 255, 255, 0.8);
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
      border-radius: 4px;
    }
    
    input {
      color: #333;
      height: 45px;
      
      &::placeholder {
        color: #666;
      }
    }
    
    .el-input__prefix-inner {
      color: #666;
    }
  }
  
  .w-100 {
    width: 100%;
  }
  
  :deep(.el-select) {
    width: 100%;
    
    .el-input__wrapper {
      background-color: rgba(255, 255, 255, 0.8);
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
    }
    
    .el-input__inner {
      color: #333;
    }
  }
  
  .validate-group {
    display: flex;
    gap: 10px;
    
    :deep(.el-input) {
      flex: 1;
    }
    
    .send-btn {
      background: #ff9900;
      color: #fff;
      border: none;
      padding: 0 15px;
      white-space: nowrap;
      font-weight: bold;
      
      &:hover {
        background: #ffaa33;
      }
    }
  }

  .usertype {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    
    :deep(.el-radio__label) {
      color: #fff;
      font-weight: bold;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }
  }
  
  .btn-group {
    display: flex;
    gap: 15px;
    margin-top: 30px;
  }

  .register_btn, .back_btn {
    flex: 1;
    height: 45px;
    border-radius: 4px;
    font-weight: 500;
    letter-spacing: 1px;
  }
  
  .register_btn {
    background: #2e8df5;
    border: none;
    
    &:hover {
      background: #4099ff;
    }
  }
  
  .back_btn {
    background: #2c62e6;
    color: #fff;
    border: none;
    font-weight: bold;
    
    &:hover {
      background: #4070ee;
    }
  }
}
</style>